// 选项按钮
<template>
    <div class='optionsMain' >
        <!-- 选项样式的 -->
        <div  class='options' v-if="type==='selection'">
            <div v-for="(item,i) in options" :key="i">
                 <button class='item' @click="handleSelection(i)" >
                {{item}}
                </button>
            </div>
        </div>
        <!-- 地址选择 -->
        <div  class='options' v-else-if="type==='address'">
            <button @click="showCascadePicker"  class='input'>{{this.address}}</button>
            <cube-button @click="addressSubmit">提交</cube-button>
        </div>
        <!-- 输入框 -->
        <div  class='options' v-else-if="type==='input'">
            <input class='input' :placeholder="palceholder" v-model="username" />
            <cube-button @click="namesubmit">提交</cube-button>
        </div>
        <!-- 日期 -->
        <div  class='options' v-else-if="type==='date'">
             <button @click="showDatePicker"  class='input'>{{this.selectedTime}}</button>
             <cube-checkbox v-model="checked">
                 农历
             </cube-checkbox>
             <cube-button @click="datesubmit">提交</cube-button>
        </div>
        <!-- 结果 -->
        <div  class='options' v-else-if="type==='result'">
          
        </div>
    </div>
</template>
<script>
import { constants } from "fs";
import { DatePicker,Checkbox,CascadePicker,Input,Button,Toast} from "cube-ui";

export default({
    name:'Options',
    data(){
        return {
            username:"",
            checked:false,
            selectedTime:"",
            address:"",
            palceholder:"请输入内容"
        }
    },
    computed: {
        // 类型
        type(){
            return this.$store.getters.currentItem.type
        },
        // 选项按钮
        options() {
            return this.$store.getters.currentItem.options
        },
       
    },
    methods: {
       
        namesubmit(){
            if(this.username===""){
                alert("请填写姓名奥")
                return
            }
            this.$store.dispatch('indexIncrement',0)
        },
        datesubmit(){
            if(this.selectedTime===""){
                alert("请选择出生日期奥")
                return
            }
            this.$store.dispatch('indexIncrement',0)
        } ,
        addressSubmit(){
            if(this.address===""){
                alert("请选择出生地点")
                return
            }
            this.$store.dispatch('indexIncrement',0)
        },
        handleSelection(i){
            this.$store.dispatch('indexIncrement',0)
        },

        //城市级联
        showCascadePicker() {
            if(!this.cascadePicker){
                this.cascadePicker = this.$createCascadePicker({
            title: '城市',
            data: cityList,
            selectedIndex: [0, 1, 0],
            onSelect: this.selectAddressHandle,
            onCancel: this.cancelAddressHandle
            })
            }
            this.cascadePicker.show()
        },
        selectAddressHandle(selectedVal, selectedIndex, selectedText){
            this.address=selectedText
        },
        cancelAddressHandle(){

        },
        //日期选择
        showDatePicker() {
        if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: '选择出生时间',
          min: new Date(1900, 7, 8, 8,0,0),
          max: new Date(2019, 9, 20,8,0,0),
          value: new Date(),
           columnCount: 4,
           format: {
            year: 'YY年',
            month: 'MM月',
            date: ' D日',
            hour: 'hh 时'
          },
          onSelect: this.selectDateHandle,
          onCancel: this.cancelDateHandle
        })
      }
        console.log("here");
        this.datePicker.show()
      },
      selectDateHandle(date, selectedVal) {
            this.selectedTime= selectedVal[0] + "年" 
            + selectedVal[1] + "月" 
            + selectedVal[2] + "日" 
            + selectedVal[3] + "时" 
        },
        cancelDateHandle() { console.log("cancel")},
    },  
    components: { //按需引入,需要注册
        DatePicker
    }
})
const cityList = [
    {
        "value": 1,
        "text": "北京市",
        "children": [
            {
                "value": 1,
                "text": "北京市",
                "children": [
                    {
                        "value": 1,
                        "text": "东城区"
                    },
                    {
                        "value": 2,
                        "text": "西城区"
                    },
                    {
                        "value": 3,
                        "text": "崇文区"
                    },
                    {
                        "value": 4,
                        "text": "宣武区"
                    },
                    {
                        "value": 5,
                        "text": "朝阳区"
                    },
                    {
                        "value": 6,
                        "text": "丰台区"
                    },
                    {
                        "value": 7,
                        "text": "石景山区"
                    },
                    {
                        "value": 8,
                        "text": "海淀区"
                    },
                    {
                        "value": 9,
                        "text": "门头沟区"
                    },
                    {
                        "value": 10,
                        "text": "房山区"
                    },
                    {
                        "value": 11,
                        "text": "通州区"
                    },
                    {
                        "value": 12,
                        "text": "顺义区"
                    },
                    {
                        "value": 13,
                        "text": "昌平区"
                    },
                    {
                        "value": 14,
                        "text": "大兴区"
                    },
                    {
                        "value": 15,
                        "text": "怀柔区"
                    },
                    {
                        "value": 16,
                        "text": "平谷区"
                    },
                    {
                        "value": 17,
                        "text": "密云县"
                    },
                    {
                        "value": 18,
                        "text": "延庆县"
                    }
                ]
            }
        ]
    }]

 
 
</script>
<style lang="stylus" scoped>
@import '~styles/ds_varibles.styl'
.optionsMain
    background : white
    .options
        display: -webkit-flex
        display: flex 
        flex-direction: column
        align-items: center
        color $optionColor
        line-height 35px
        margin-right 50px
        margin-top 40px
        margin-bottom 50px
        float right 
        .item
            display block 
            margin-top 20px
            padding-left 20px
            padding-right 20px
            font-size 20px
            border-style:solid
            text-align center
            border-width 2px
            border-radius 20px
            border-color $optionColor
            color $optionColor
            background white
        .input
            display block
            border-style:solid
            text-align left
            border-width 2px
            border-radius 20px
            height 40px
            border-color $optionColor
            color $optionColor
            width 200px
            margin-right 100px
            margin-bottom 80px

</style>
